<template>
  <view class="page">
    <global-contact></global-contact>
    <view class="header">
      <view class="tab" :style="{ height: navHeight + 'px', 'padding-top': statusHeight + 'px' }">
        <image></image>
        <!-- <image src="https://www.atuanjian.com/appletStatic/static/dynamic/camera.png" mode="aspectFit"
					@click="submit"></image> -->
        <text>动态</text>
      </view>
      <!-- 新加的搜索 -->
      <view class="head">
        <image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png" mode="aspectFit">
        </image>
        <view class="search">
          <u-search @search="search()" placeholder="户外拓展/团建/骑行" :showAction="false" v-model="keyword">
          </u-search>
        </view>
        <u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
        <!-- <image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png" mode="aspectFit">
        </image> -->
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="content" :style="{ 'padding-top': statusHeight + navHeight + 30 + 'px' }">
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="content" :style="{ 'padding-top': statusHeight + navHeight + 40 + 'px' }">
        <!-- #endif -->
      </view>
      <view class="contain">
        <view class="tabWrap">
          <view :class="cate == item.id ? 'active tabItem' : 'tabItem'" v-for="(item, index) in tabList" :key="index" @click="navClick(item.id)">
            <text>{{ item.text }}</text>
            <view class="line"></view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="scroll1">
          <view class="wrapper" v-for="(item, index) in listData" :key="index" @click="personCenter(item)">
            <view class="info">
              <view class="" style="display: flex;align-items: center;">
                <image style="border-radius: 50%;" :src="imageUrl(item.user.avatar_url)" mode="aspectFill"></image>
                <view class="word">
                  <view class="name">{{ item.user.username }} <span v-for="(userItem, index_1) in item.user.user_join.user_identity_id" :key="userItem">{{ userItem
                      }}</span></view>
                  <!-- <view class="time">{{item.created_at}}</view> -->
                </view>
              </view>
              <!-- 关注 -->
              <!-- is_attention -->
              <block v-if="cate != 3">
                <view class="guanZhu" v-if="item.is_attention == 1" @click.stop="collectUserS(item, 0, index)">
                  <image src="https://www.atuanjian.com/appletStatic/static/guanzhu.png" mode=""></image>
                  <text>取消关注</text>
                </view>
                <view class="guanZhu" v-if="item.is_attention == 0" @click.stop="collectUserS(item, 1, index)">
                  <image :src="imgApi+'images/wallet/guanzhu.png'" mode=""></image>
                  <text>关注</text>
                </view>
              </block>
              <block v-else>
                <view class="guanZhu" @click.stop="collectUserS(item, 0, index)">
                  <image src="https://www.atuanjian.com/appletStatic/static/guanzhu.png" mode=""></image>
                  <text>取消关注</text>
                </view>
              </block>
              <!-- <view class="lx">联系TA</view> -->
            </view>
            <view class="describle">{{ item.content }}</view>
            <view class="imgList">
              <image @click.stop="preview(item.img_arr, index1)" v-for="(item1, index1) in parseImgArr(item.img_arr)" :key="index1" :src="showImg + item1" mode="aspectFill">
              </image>
            </view>
            <view class="con-bottom">
              {{ item.created_at }}发布
              <view class="more" @click.stop="handleshowPop(index)">
                <image src="https://www.atuanjian.com/appletStatic/static/images/more.png" mode="scaleToFill" />
              </view>
              <view class="pop" v-if="item.isShow" @click.stop="collect(item, index)">
                <view class="pop-1">
                  <image :src="getImageSrc(item)" mode="scaleToFill" />
                  点赞
                </view>
                <view class="pop-1" style="border: none;" @click.stop="handleComment(index)">
                  <image src="https://www.atuanjian.com/appletStatic/static/images/u-43.svg" mode="scaleToFill" />
                  评论
                </view>
              </view>
            </view>
            <view class="con-bottom" style="width: 60%;">
              距离您{{ item.distance || '0' }}km
              <view class="address">
                <image src="https://www.atuanjian.com/appletStatic/static/images/u-address.svg" mode="scaleToFill" />
                {{ item.address || '' }}
              </view>
            </view>
            <!-- <view class="tool">
              <view class="toolLeft">
                <view class="tool_item">
                  <image src="https://www.atuanjian.com/appletStatic/static/need/i2.png" mode=""></image>
                  <text>西安市</text>
                </view>
              </view>
              <view class="toolRight">
                <view class="tool_item">
                  <image src="https://www.atuanjian.com/appletStatic/static/dynamic/i1.png" mode="">
                  </image>
                  <text>{{item.comments_count}}</text>
                </view>
                <view class="tool_item" @click="collect(item,index)">
                  <image src="https://www.atuanjian.com/appletStatic/static/dynamic/i2.png" mode="">
                  </image>
                  <text>{{item.collection_count}}</text>
                </view>
                <view class="tool_item" @click="talk(item,index)">
                  <image src="https://www.atuanjian.com/appletStatic/static/dynamic/i3.png" mode="">
                  </image>
                  <text>{{item.comments_count}}</text>
                </view>
              </view>
            </view> -->
            <view class="tall-list">
              <view class="tall-item"><span>{{ item.user_dynamic_record_count }}</span>人点赞</view>
              <view class="tall-item" v-for="comment in item.user_dynamic_comments" :key="comment.id"><span>{{ comment.user_info.username }}</span>：{{ comment.content }}</view>
            </view>
            <!-- 评论列表 -->
            <!-- <view class="talkList">
              <view class="input" v-if="userInfo">
                <image src="https://www.atuanjian.com/appletStatic/static/dynamic/i3.png" mode=""></image>
                <u--input placeholder="喜欢就给个评论支持下" border="surround" v-model="item.message"></u--input>
                <view class="btn" @click="talking(item,index)">发送</view>
              </view>
            </view> -->
          </view>
          <view class="list" v-if="listData.length == 0">
            <u-empty mode="data" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/data.png">
            </u-empty>
          </view>
        </scroll-view>
      </view>
      <u-picker :show="showCity" :columns="cityList" @cancel="cancel1" @confirm="confirm1"></u-picker>
      <tabBar current='1'></tabBar>
      <u-popup :show="showPop" :round="12" mode="bottom" @close="close">
        <view class="pop-flex">
          <u-textarea v-model="contents" placeholder="请输入内容"></u-textarea>
          <view class="send" @click="talking">发送</view>
        </view>
      </u-popup>
    </view>
</template>

<script>
import { statusHeight, navHeight } from "@/utils/common.js";
import tabBar from "@/components/tabBar.vue";
// dynamic
import {
  dynamic,
  userCollect,
  userDynamicComments,
  CommentsList,
  getPoster,
  siteSetting,
  collectUser,
} from "@/utils/request.js";
export default {
  data() {
    return {
      imgApi:this.$config.imgApi,
      keyword: "",
      showPop: false,
      contents: '',
      index: null,
      statusHeight: 0,
      navHeight: 0,
      userInfo: uni.getStorageSync("userInfo")
        ? JSON.parse(uni.getStorageSync("userInfo"))
        : null,
      upload: "",
      tabList: [
        {
          text: "最新发布",
          id: 1,
        },
        {
          text: "优选推荐",
          id: 2
        },
        {
          text: "最新回复",
          id: 4
        },
        {
          text: "距离最近",
          id: 5
        },
        {
          text: "关注",
          id: 3
        },
      ],
      type: 0, // 顶部tab类型
      cate: 1,
      listData: [], // 动态列表
      p: 0,
      n: 10,
      totalPage: 0,
      contents: "",
      talkList: [],
      showImg: "",
      tp: 0,
      ttp: 0,
      objItem: {},
      // showImg:'',
      posterList: [],
      // 定位地址
      cityList: [],
      showCity: false, //地址弹出层
      currentCity: uni.getStorageSync("webAddress"),
      uEmptyText: "数据加载中...",
    };
  },
  components: {
    tabBar,
  },
  computed: {
    imageUrl() {
      return (value) => {
        if (value) {
          const url = this.$config.upLoadApi + value
          return url;
        }
        return 'https://www.atuanjian.com/appletStatic/static/mine/head.png';
      }
    },
  },
  methods: {
    getImageSrc(item) {
      return item.is_concern === 0 ?
        'https://www.atuanjian.com/appletStatic/static/images/u-dian.svg' :
        'https://www.atuanjian.com/appletStatic/static/images/u-dian1.png';
    },
    personCenter(item) {
      //   uni.navigateTo({
      //     url: "/pagesA/homepage/homepage?id=" + item.wx_user.user_id,
      //   });
      uni.navigateTo({
        url: "/pagesB/DynamicDetails/index?id=" + item.user.id,
      });
    },
    collectUserS(item, val, index) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      let data = {
        token: this.userInfo.token,
        id: item.id,
        attention_status: val,
        d_user_id: JSON.parse(uni.getStorageSync('userInfo')).user_info.id
      };
      this.collectUser(data).then((res) => {
        console.log("关注", res);
        this.listData[index].is_attention = val;
        if (val == "1") {
          uni.showToast({
            title: "已关注",
            icon: "none",
          });
        }
        if (val == "0") {
          uni.showToast({
            title: "已取关",
            icon: "none",
          });
          this.p = 0;
          this.listData = [];
          this.getList();
          // if(this.type==2){
          // 	this.listData.splice(index,1)
          // }
        }
      });
    },
    cancel1() {
      this.showCity = false;
    },
    confirm1(event) {
      uni.setStorageSync("webAddress", event.value[0]);
      this.currentCity = event.value[0];
      this.showCity = false;
    },
    getSetting() {
      this.siteSetting().then((res) => {
        uni.setStorageSync("webAddress", res.default_substation);
        // this.currentCity=res.default_substation
        if (res.city && res.city.length > 0) {
          this.cityList.push(res.city);
        }
        // this.defaultMethods()
      });
    },
    chooseCity() {
      this.showCity = true;
      // uni.showToast({
      // 	icon:'loading',
      // 	title:'正在研发中...'
      // })
    },
    preview(arr, index) {
      try {
        let imgArr = this.parseImgArr(arr);
        let arrs = imgArr.map(val => this.showImg + val);

        uni.previewImage({
          urls: arrs,
          current: index
        });
      } catch (e) {
        console.error('Preview error:', e);
        uni.showToast({
          title: '图片预览失败',
          icon: 'none'
        });
      }
    },
    parseImgArr(imgArr) {
      try {
        return typeof imgArr === 'string' ? JSON.parse(imgArr) : (Array.isArray(imgArr) ? imgArr : []);
      } catch (e) {
        console.warn('Invalid image array:', e);
        return [];
      }
    },
    positerClick() {
      uni.navigateTo({
        url: "./posterList",
      });
    },
    posterDetail(item) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "./posterDetail?id=" + item.id,
      });
    },
    // 前往发布
    submit() {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pagesA/dynamic/submit",
      });
    },
    talk(item, index) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      // this.getTalkList(item,index)
      uni.navigateTo({
        url: "./detail?id=" + item.id,
      });
    },
    // 收藏
    collect(item, index) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      let data = {
        token: this.userInfo.token,
        user_dynamic_id: item.id,
        collect_status: item.is_concern == 0 ? 1 : 0
      };
      this.userCollect(data).then((res) => {
        uni.showToast({
          title: "操作成功",
        });
        if(item.is_concern == 0){
          this.listData[index].is_concern= 1
          this.listData[index].user_dynamic_record_count += 1;
        }else{
          this.listData[index].is_concern= 0
          this.listData[index].user_dynamic_record_count -= 1
        }
      });
    },
    async userCollect(data) {
      return await userCollect(data);
    },
    async dynamic(data) {
      return await dynamic(data);
    },
    // userDynamicComments
    async userDynamicComments(data) {
      return await userDynamicComments(data);
    },
    // CommentsList 评论列表
    async CommentsList(data) {
      return await CommentsList(data);
    },
    // collectUser
    async collectUser(data) {
      return await collectUser(data);
    },
    // 评论列表
    getTalkList(item, index) {
      let data = {
        user_dynamic_id: item.id,
        p: this.tp,
        n: 10,
        type: this.type,
        token: this.userInfo.token,
      };
      // if((this.type+1)==3){
      // 	data=Object.assign(data,{token:this.userInfo.token})
      // }
      this.CommentsList(data).then((res) => {
        console.log(res);
      });

      // talkList
    },
    handleComment(index, item) {
      this.index = index
      this.objItem = item
      this.showPop = true
    },
    close() {
      this.showPop = false
    },
    // 评论
    talking() {
      if (!this.userInfo.token) {
        uni.showToast({
          title: "请登录",
          icon: "none",
        });
        return;
      }
      if (!this.contents) {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      }
      // return
      let data = {
        token: this.userInfo.token,
        user_dynamic_id: this.listData[this.index].id,
        contents: this.contents,
      };
      this.userDynamicComments(data).then((res) => {
        if (res) {
          uni.showToast({
            title: "已评论",
          });
          setTimeout(() => {
            this.contents = ''
            this.showPop = false
            this.p = 0;
            this.listData = [];
            this.getList();
          }, 1500)
          // this.listData[index].message = "";
        }
      });
    },
    // 动态列表
    getList() {
      // let tokenKey=''
      uni.getLocation({
        type: 'wgs84',
        success(res) {
          console.log('位置信息', res,)
        },
        fail: (err) => {
          console.log('获取信息四百err：-', err)
        }
      })
      let data = {
        // token type 为3 时必须存在
        token: this.userInfo ? this.userInfo.token : "",
        // 	获取类型  1最新，2最热，3关注，4最新回复，5最近距离
        type: this.cate,
        p: this.p,
        n: this.n,
        lat: '34.269574',
        lng: '108.909772'
      };
      if (this.cate == 3) {
        data = Object.assign(data, {
          token: this.userInfo.token,
        });
      }
      this.dynamic(data).then((r1) => {
        if (r1.code == 200) {
          let res = r1.data
          if (res.count < 1) {
            this.$data.uEmptyText = "暂无数据";
            return false;
          }
          this.totalPage = Math.ceil(res.count / 10);
          // listData
          if (res.list.length > 0) {
            res.list.forEach((val) => {
              val = Object.assign(val, {
                message: "",
              });
            });
            let listData = [...this.listData, ...res.list];
            listData.forEach((item) => {
              item.isShow = false;
            });
            this.listData = listData;
            console.log("this.listData", this.listData);
          } else {
            this.listData = [];
          }
        }
      });
    },
    handleshowPop(index) {
      if (!uni.getStorageSync('userInfo')) {
        uni.showToast({
          title: '请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: "/pagesB/login/login"
          })
        }, 1500)
        return;
      }
      this.listData.forEach((item, i) => {
        item.isShow = false;
      });
      this.listData[index].isShow = !this.listData[index].isShow
    },
    navClick(id) {
      if (id == 3) {
        if (!this.userInfo) {
          uni.showToast({
            title: '请登录',
            icon: 'none'
          })
          return
        }
      }
      this.cate = id;
      this.p = 0;
      this.listData = [];
      this.getList();
    },

    async getPoster(data) {
      return await getPoster(data);
    },
    getPosterList() {
      let data = {
        p: 0,
        n: 10,
        is_push: true,
      };
      this.getPoster(data).then((res) => {
        console.log("海报信息", res);
        if (res.list && res.list.length > 0) {
          this.posterList = res.list;
        }
      });
    },
  },
  onLoad() {
    this.upload = this.$config.showImgApi;
    this.showImg = this.$config.showImgApi;
    this.statusHeight = statusHeight;
    this.navHeight = navHeight;
    this.getList();
  },
  onShow() {
    this.getPosterList();
    if (uni.getStorageSync("upload")) {
      uni.removeStorageSync("upload");
      this.p = 0;
      this.listData = [];
      this.getList();
    }
  },
  onReachBottom() {
    if (this.p < this.totalPage - 1) {
      this.p++;
      this.getList();
    }
  },
  onShareAppMessage() { },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f2f2f2;

  .pop-flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    ::v-deep.u-textarea {
      font-size: 23rpx;
      background: #F2F2F2;
      border-radius: 16rpx;
      width: 558rpx;
      margin-left: 16rpx;
    }

    .send {
      width: 125rpx;
      height: 69rpx;
      line-height: 69rpx;
      background: #FFBB50;
      color: #333333;
      font-size: 26rpx;
      border-radius: 32rpx;
      text-align: center;
      margin: 0 16rpx 0 16rpx;
    }
  }
}

.lx {
  width: 118rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 62rpx;
  font-size: 24rpx;
  color: #ffffff;
  background: #ffbb50;
}

.scroll1 {
  height: 80vh;
}

.tall-list {
  padding: 16rpx;
  background: #cac7c752;
  border-radius: 8rpx;
  margin: 16rpx auto 0;

  .tall-item {
    font-size: 26rpx;
    margin-bottom: 10rpx;

    span {
      color: #F59A23;
    }
  }
}

.con-bottom {
  display: flex;
  align-content: center;
  justify-content: space-between;
  font-size: 16rpx;
  color: #333333;
  margin-top: 16rpx;
  position: relative;

  .address {
    display: flex;
    align-items: center;
    font-size: 16rpx;

    image {
      width: 14rpx;
      height: 18rpx;
      margin-right: 8rpx;
    }
  }

  .more {
    width: 53rpx;
    height: 30rpx;
    display: grid;
    place-items: center;
    background: #f2f2f2;

    image {
      width: 18rpx;
      height: 8rpx;
    }
  }

  .pop {
    position: absolute;
    top: -2rpx;
    right: 54rpx;
    width: 341rpx;
    height: 74rpx;
    display: flex;
    align-items: center;
    background: #ffffff;
    box-shadow: 1rpx 1rpx 5rpx rgba($color: #000000, $alpha: 0.4);
    z-index: 99;

    .pop-1 {
      flex: 1;
      border-right: 1rpx solid#AAAAAA;
      height: 35rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 20rpx;
      }
    }
  }
}

.header {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #ffb850;

  .tab {
    padding-left: 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-right: 250rpx;
    }

    text {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .head {
    @include flex_style(space-between, center, row nowrap);
    padding: 16rpx 22rpx 16rpx 30rpx;

    .local {
      @include flex_style(flex-start, center, row nowrap);

      text {
        display: block;
        max-width: 85rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 28rpx;
        font-family: 苹方-简;
        font-weight: normal;
        line-height: 38rpx;
        color: #ffffff;
      }

      .trang {
        width: 0;
        height: 0;
        border-left: 7rpx solid transparent;
        border-right: 7rpx solid transparent;
        border-top: 10rpx solid #ffffff;
        margin-left: 8rpx;
      }
    }

    .search {
      flex: 1;
      height: 56rpx;

      ::v-deep.u-search__content {
        background-color: #f5f5f5 !important;
        border-width: 0;
      }

      ::v-deep.u-search__content__input {
        height: 56rpx !important;
        background-color: #f5f5f5 !important;
        border-width: 0;
      }
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.content {
  padding-right: 24rpx;
  padding-left: 24rpx;
  padding-bottom: 20rpx;

  .today {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 20rpx 26rpx;
    margin-top: 20rpx;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-flow: row nowrap;
      margin-bottom: 22rpx;

      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .line {
          width: 6rpx;
          height: 30rpx;
          border-radius: 3rpx;
          background-color: #ffb850;
          margin-right: 16rpx;
        }

        text {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 42rpx;
          color: #1a1a1a;
        }
      }

      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-flow: row nowrap;

        text {
          font-size: 28rpx;
          font-family: 苹方-简;
          font-weight: normal;
          line-height: 38rpx;
          color: #888888;
        }

        image {
          width: 26rpx;
          height: 26rpx;
        }
      }
    }

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        image {
          width: 206rpx;
          height: 252rpx;
        }

        .title {
          text-align: center;
          font-size: 26rpx;
          font-family: 苹方-简;
          font-weight: normal;
          line-height: 34rpx;
          color: #1a1a1a;
          margin: 12rpx 0 14rpx;
        }

        .des {
          font-size: 22rpx;
          font-family: 苹方-简;
          font-weight: normal;
          line-height: 30rpx;
          color: #999999;
        }
      }
    }
  }
}

.contain {
  background-color: #ffffff;

  .tabWrap {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 84rpx;
    box-sizing: border-box;
    background: #f5f5f5;
    border-bottom: 1rpx solid #797979;
    padding-bottom: 10rpx;

    .tabItem {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;

      text {
        font-size: 26rpx;
        font-weight: normal;
        line-height: 34rpx;
        color: #7f7f7f;
      }

      .line {
        margin-top: 12rpx;
        width: 40rpx;
        height: 6rpx;
        background-color: transparent;
      }
    }

    .active {
      text {
        color: #333333;
      }

      .line {
        background-color: #ffb850;
      }
    }
  }

  .wrapper {
    padding: 42rpx 30rpx 30rpx;

    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      position: relative;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .word {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        .name {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #1a1a1a;
          display: flex;
          align-items: center;

          span {
            padding: 4rpx 8rpx;
            margin-left: 10rpx;
            background: #c280ff;
            border-radius: 32rpx;
            font-size: 12rpx;
            color: #b50f9f;
          }
        }

        .time {
          font-size: 22rpx;
          font-family: 苹方-简;
          font-weight: normal;
          line-height: 30rpx;
          color: #999999;
        }
      }

      .guanZhu {
        font-size: 24rpx;
        color: #FFFFFF;
        display: flex;
        padding: 8rpx 23rpx;
        border-radius: 132rpx;
        background-color: #FFBB50;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
          flex-shrink: 0;
          margin-right: 5rpx;
        }
      }
    }

    .describle {
      font-size: 28rpx;
      font-family: 苹方-简;
      font-weight: normal;
      line-height: 42rpx;
      color: #1a1a1a;
      margin-bottom: 8rpx;
      word-break: break-all;
    }

    .imgList {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-flow: row wrap;

      image {
        width: 224rpx;
        height: 224rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
      }

      image:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}

.tool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row nowrap;

  .toolRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-flow: row nowrap;
  }

  .tool_item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-flow: row nowrap;
    margin-right: 30rpx;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
  }
}

.talkList {
  .input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row nowrap;
    margin: 10rpx 0;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .u-input {
      padding: 4rpx 9rpx !important;
      border-radius: 10rpx !important;
    }
  }
}

.btn {
  padding: 0 10rpx;
  line-height: 40rpx;
  border-radius: 20rpx;
  margin-left: 10rpx;
}

.u-empty {
  padding-bottom: 30rpx;
}
</style>